<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跳蚤市场</title>
    <link rel="stylesheet" href="../css/goods-market.css">
    <script src="../js/jquery.mini.js"></script>
</head>

<body>
    <div class="toolbar"></div>
    <div class="center">
        <div class="c-top">
            <span>推荐好物</span>
            <div class="type-list">分类索引
                <img src="../imgs/分类.png" id="fl-pic">
                <div class="list-content">
                    <div class="list-left">
                    </div>
                    <div class="list-right">
                    </div>
                </div>
            </div>

        </div>
        <div class="goods-display">
            <div class="first-line">
            </div>
            <div class="second-line">
            </div>
        </div>
        <div class="page">
        </div>
    </div>
</body>
<script>
    $(function () {
        $('.toolbar').load("toolbar.html");
        $('.list-content').hide();
        $('.type-list').mouseover(function () {
            $('.list-content').show();
        });
        $('.type-list').mouseout(function () {
            $('.list-content').hide();
        });
        var html1;
        var html2;
        var arr = Array();
        var page;
        $.ajax({
            url: "/goodstypes/groups",
            type: "get",
            datatype: "json",
            success: function (result) {
                if (result.state === 200) {
                    $('.list-left').empty();
                    $('.list-right').empty();
                    var data = result.data;
                    for (var i = 0; i < data.length; i++) {
                        var hmtl = "";
                        html = " <div class='group-items'>" + data[i] + "</div>";
                        $('.list-left').append(html);
                        html1 = "";
                        var groupname = data[i];
                        $.ajax({
                            url: "/goodstypes/typenames",
                            type: "post",
                            data: { "groupname": groupname },
                            datatype: "json",
                            success: function (result1) {
                                if (result1.state === 200) {
                                    var data = result1.data;
                                    console.log(data.length);
                                    for (var j = 0; j < data.length; j++) {
                                        html2 += "<div class='type-each'>" + data[j].typeName + "</div>";
                                    }
                                    if (html2 != "") {
                                        html1 = "<div class='type-items'>" + html2 + "</div>";
                                        $('.list-right').append(html1);
                                    }
                                    html2 = "";
                                } else {
                                    alert("加载具体的类别失败！");
                                }
                            },
                        });

                    }
                } else {
                    alert("类别加载错误");
                }
            }
        });
        $.ajax({
            url: "/goods/all",
            type: "get",
            dataType: "json",
            success: function (result) {
                if (result.state === 200) {
                    var data = result.data;
                    for (var i = 0; i < data.length; i++) {
                        var html = "";
                        html += "<div class='goods-each' goods_id=" + data[i].goodsId + "><div class='user'><div class='pic'><img id='head-pic' src=" + data[i].userImg + ">";
                        html += "</div><div class='address'>" + "发布于" + data[i].postAddress;
                        html += "</div><div class='createtime'>" + data[i].createTime;
                        html += "</div></div><div class='goods'><div class='good-pic'><img src=" + data[i].goodsImgPath + ">";
                        html += "</div><div class='price'>" + "￥" + data[i].originalPrice;
                        html += "</div></div><div class='name'>" + data[i].goodsName;
                        html += "</div></div>";
                        arr.push(html);
                    }
                    for (var j = 0; j < 6; j++) {
                        if (j < arr.length) {
                            if (j < 3) {
                                $('.first-line').append(arr[j]);
                            }
                            else {
                                $('.second-line').append(arr[j]);
                            }
                        }
                    }
                    page = Math.floor(arr.length / 4) + 1;
                    for (var j = 0; j < page; j++) {
                        var html = "";
                        html = "<li class='page-each'>" + (j + 1) + "</li>";
                        $('.page').append(html);
                    }

                } else {
                    alert("闲置物品加载失败！");
                }
            }
        });

        $('.first-line').on('click', '.goods-each', function () {
            var goods_id = $(this).attr("goods_id");
            window.location.href = "goods.html?goods_id=" + goods_id;
        });
        $('.second-line').on('click', '.goods-each', function () {
            var goods_id = $(this).attr("goods_id");
            window.location.href = "goods.html?goods_id=" + goods_id;
        })
        $('.page').on('click', '.page-each', function () {
            var num = $(this).text();
            $('.first-line').empty();
            $('.second-line').empty();
            if (num != '1') {
                start = (num - 1) * 6;
                for (var k = start; k < start + 6; k++) {
                    if (k < arr.length) {
                        if (k < start + 3) {
                            $('.first-line').append(arr[k]);
                        } else {
                            $('.second-line').append(arr[k]);
                        }
                    }
                }
            }
            else {
                for (var k = 0; k < 6; k++) {
                    if (k < arr.length) {
                        if (k < 3) {
                            $('.first-line').append(arr[k]);
                        } else {
                            $('.second-line').append(arr[k]);
                        }
                    }
                }
            }
        });
    });

</script>

</html>